<template>
  <div>
    <el-collapse-transition>
      <div>
        <!--内容-->
        <div class="content">
          <div class="content app-main-content-box">
            <!--筛选-->
            <div class="filter-container">
              <el-form
                ref="filterForm"
                :inline="true"
                :model="filterForm"
                size="small"
                :rules="rules"
              >
                <el-form-item prop="businessName" label="商户简称：">
                  <el-input
                    v-model="filterForm.businessName"
                    placeholder="请输入商户简称"
                  />
                </el-form-item>
                <el-form-item prop="mobilePhone" label="商户手机号：">
                  <el-input
                    v-model="filterForm.mobilePhone"
                    maxlength="11"
                    placeholder="请输入商户手机号"
                  />
                </el-form-item>
                <el-form-item prop="industry" label="主营行业：">
                  <el-select
                    v-model="filterForm.industry"
                    placeholder="请选择商户主营行业"
                  >
                    <el-option label="全部" value=""></el-option>
                    <el-option
                      v-for="(item, index) in industryOptions"
                      :key="index"
                      :label="item"
                      :value="index"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="" prop="date">
                  <el-date-picker
                    v-model="filterForm.date"
                    :clearable="false"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']"
                    size="small"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="pickerChange"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="search">搜索</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              element-loading-text="加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.6)"
            >
              <el-table-column
                prop="number"
                label="商户编号"
                min-width="120"
                align="center"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.mercNo || "--" }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="businessName"
                label="商户简称"
                align="center"
                min-width="210"
              />
              <el-table-column
                prop="phone"
                label="商户手机号"
                min-width="100"
                align="center"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.mobilePhone || "--" }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="data1" label="主营行业" align="center">
                <template slot-scope="scope">
                  {{ industryOptions[scope.row.industry] }}
                </template>
              </el-table-column>
              <el-table-column prop="shopCount" label="门店数" align="center">
                 <template slot-scope="scope">
                  <el-button @click="showShopListDialog(scope.row)" type="text">{{
                    scope.row.shopCount
                  }}</el-button>
                </template>
              </el-table-column>
              <el-table-column
                prop="goodsCount"
                label="商品数量"
                align="center"
              />
              <el-table-column
                prop="orderCount"
                label="订单笔数"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button @click="toOrder(scope.row)" type="text">{{
                    scope.row.orderCount
                  }}</el-button>
                </template>
              </el-table-column>
              <el-table-column
                prop="salesCount"
                label="售后笔数"
                align="center"
              />
              <el-table-column
                prop="time"
                label="入驻时间"
                min-width="120"
                align="center"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.enterTime || "--" }}</div>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" right v-if="!$store.getters.banBtnList.includes('BTN_MEMBER_DETAIL')">
                <template slot-scope="scope">
                  <!-- @click="gopage('/marketing/activity-customForm/components/CustomFormViewData')" -->
                  <el-button
                    type="text"
                    size="mini"
                    @click="lookDetail(scope.row)"
                    >详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!--分页器-->
            <pagination-direction
              v-if="paginationConfig.total !== 0"
              :config="paginationConfig"
              @sizeschange="sizesChange"
              @pagechange="pageChange"
            />
          </div>
        </div>
      </div>
    </el-collapse-transition>
    <el-dialog
      :title="detailMsg.businessName"
      center
      :visible.sync="showDetail"
    >
      <div class="detail-content">
        <div class="one">
          <div class="left">经营场所：</div>
          <div class="right">{{ detailMsg.address || "无" }}</div>
        </div>
        <div class="one">
          <div class="left">经营者名称：</div>
          <div class="right">{{ detailMsg.principal || "无" }}</div>
        </div>
        <div class="one">
          <div class="left">经营者电话：</div>
          <div class="right">{{ detailMsg.mobilePhone || "无" }}</div>
        </div>
        <div class="one">
          <div class="left">营业执照：</div>
          <div class="right">
            <div class="img">
              <img :src="detailMsg.businessLicense" alt="无" />
            </div>
          </div>
        </div>
        <div class="one">
          <div class="left">经营者证件：</div>
          <div class="right">
            <div class="img">
              <img :src="detailMsg.idCardFront" alt="无" />
            </div>
            <div class="img">
              <img :src="detailMsg.idCardBack" alt="无" />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="门店列表"
      :visible.sync="showShopList"
      width="30%"
      center
      :before-close="closeShopList"
    >
    <div class="shoplist">
      <div class="self" v-for="(item,index) in shopList" :key="index">
        <div class="self-top">
          <div class="name">门店名称：{{item.name}}</div>
          <div class="status">门店状态：{{item.status == 0?'禁用':'启用'}}</div>
        </div>
        <div class="address">门店电话：{{item.phone}}</div>
        <div class="address">营业时间：{{item.tradeTime}}</div>
      </div>
    </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import {
  pubDomainBusinessList,
  getIndustry,
  getDetail,
  getFHBShopCertificates,
  getShops
} from "@/publicApi/publicDomain";
import { validateMobilePhone } from "@/utils/validate.js";
export default {
  data() {
    const validateTelPhone = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else if (!validateMobilePhone(value)) {
        callback(new Error("请输入正确手机号"));
      } else {
        callback();
      }
    };
    return {
      tableData: [],
      /* 查询条件*/
      //筛选
      filterForm: {
        status: "",
        businessName: "",
        mobilePhone: "",
        date: [],
        industry: "",
      },
      //分页配置
      paginationConfig: {
        page: 1,
        pageSize: 10,
        pageType: "",
        total: 0,
        pageSizes: [10, 20], // 分页pages
        layout: "total, sizes, prev, pager, next, jumper", // 分页类型
        direction: "center", // 分页位置
      },
      industryOptions: {},
      showDetail: false,
      detailMsg: {},
      rules: {
        mobilePhone: [
          {
            validator: validateTelPhone,
            trigger: ["blur", "change"],
          },
        ],
      },
      showShopList:false,
      shopList:[],
    };
  },
  created() {
    getIndustry().then((res) => {
      res.code === 0 ? (this.industryOptions = res.data) : "";
    });
    this.initData();
  },
  methods: {
    //请求数据
    initData() {
      this.$nextTick(() => {
        this.$refs.filterForm.validate((valid, error) => {
          if (valid) {
            let {
              paginationConfig: { page, pageSize },
              filterForm: { date },
              dateObj,
            } = this;
            let params = Object.assign({ page, pageSize }, this.filterForm);
            delete params.date;
            if (date.length > 1) {
              dateObj = {
                registerBeginDay: date[0],
                registerEndDay: date[1],
              };
            }
            params = Object.assign(params, dateObj);
            pubDomainBusinessList(params)
              .then((res) => {
                this.tableData = res.data.list;
                this.paginationConfig.total = res.data.total;
                this.paginationConfig.page = res.data.pageNum;
              })
              .finally(() => {
                // this.loading = false
              });
          }
        });
      });
    },
    search() {
      this.paginationConfig.page = 1;
      this.initData();
    },
    //重置
    reset() {
      this.$refs.filterForm.resetFields();
      this.paginationConfig.page = 1;
      this.initData();
    },
    goFormViewData(index, row) {
      this.$router.push({
        name: "MarketingActivityCustomFormViewData",
        params: { id: row.id },
      });
    },
    // 分页sizes改变
    sizesChange() {
      this.paginationConfig.page = 1;
      this.initData();
    },

    // 分页page改变
    pageChange() {
      this.initData();
    },
    async lookDetail(row) {
      let { id, pubDomainMainShopId } = row;
      let resMsg = await getDetail({ id });
      resMsg.code === 0 ? (this.detailMsg = resMsg.data) : "";
      let res = await getFHBShopCertificates({
        storeId: this.detailMsg.pubDomainMainShopId,
      });
      res.code === 0
        ? (this.detailMsg = Object.assign({}, this.detailMsg, res.data))
        : "";
      console.log(this.detailMsg);
      this.showDetail = true;
    },
    toOrder(row) {
      let { mercNo } = row;
      this.$router.push({
        name: "MerchantOrders",
        query: {
          mercNo,
        },
      });
    },
    showShopListDialog(row){
      let {shopCount,id:pubBusinessId} = row
      if(shopCount<=0) return
      getShops({pubBusinessId}).then(res=>{
        console.log(res)
        if(res.code == 0){
          this.shopList = res.data
          this.showShopList = true
        }
      })
    },
    closeShopList(done){
      this.shopList = []
      done()
    }
  },
};
</script>
  
  <style lang="scss" scoped>
//头部
.top {
  padding: 0px 60px 0;
  border-radius: 5px 5px;
  background-color: #fff;
  margin-bottom: 10px;

  .title {
    font-size: 20px;
  }

  .el-button {
    margin-left: 30px;
  }
}

//内容
.content {
  padding: 0px 30px 24px;
  border-radius: 5px;
  background-color: #fff;
}

//筛选
.el-form {
  padding-top: 30px;
}

//表格
.el-table {
  text-align: center;

  .el-button {
    padding: 0 30px 0 10px;
    font-size: small;
  }
}

//分页器
.el-pagination {
  margin-top: 50px;
}
.detail-content {
  max-height: 500px;
  overflow-y: scroll;
  &::-webkit-scrollbar{
    display: none;
  }
  .one {
    margin-bottom: 15px;
    font-size: 14px;
    display: flex;
    .left {
      font-weight: bold;
      min-width: 90px;
    }
    .img {
      width: 300px;
      height: 160px;
      margin-bottom: 15px;
      > img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.shoplist{
  max-height: 500px;
  overflow-y: scroll;
  width: 100%;
  &::-webkit-scrollbar{
    display: none;
  }
  .self{
    border: 1px solid #ccc;
    padding: 15px 20px 0 15px;
    margin-bottom: 15px;
    .self-top{
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .status{
        margin-left: 20px;
        white-space: nowrap;
      }
    }
    .address{
      margin-bottom: 15px;
    }
  }
}
</style>
  